<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<view
			style="width: 100%;display: flex;justify-content: center;color: #d3d3d3;font-size: 20rpx;margin-top: 20rpx;"
			v-if="index%8 == 0">
			{{$u.timeFormat(info.time, 'mm-dd hh:MM:ss')}}
		</view>
		<view v-if="$store.state.user.user.id != info.uid" style="width: 100%;display: flex;padding: 15rpx;">
			<u-avatar @click="gofriend" mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.uid + '.jpg'"></u-avatar>
			<view style="width: 100%;display: flex;flex-direction: column;">
				<view
					style="margin-left: 25rpx;color: #b9b9b9;font-size: 18rpx;margin-bottom: 6rpx;margin-top: -10rpx;">
					{{info.name}}
				</view>
				<view style="width: 100%;display: flex;">
					<image src="/static/images/leftc.png"
						style="width: 25rpx;position: relative;left: 7rpx;top: 10px;" mode="widthFix"></image>
					<view v-if="infox.status && infox.status != '已完结'"
						style="width: 350rpx;min-height: 80rpx;display: flex;padding: 15rpx;border-radius: 8rpx;background: #fff;align-items: center;flex-direction: column;">
							<image src="/static/images/mnadc.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view style="font-size: 20rpx;margin-top: 10rpx;">
								{{info.name}}邀请你语音通话
							</view>
							
							<view style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 12rpx;justify-content: center;">
								
								<u-avatar v-for="(item,ki) in makeusers()" size="30"
									:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.id + '.jpg'"></u-avatar>
							</view>
							
							<view @click="goinroom" v-if="infox.status != '已完结'" style="width: 100%;display: flex;margin-top: 22rpx;justify-content: center;margin-bottom:20rpx;">
								<view style="padding: 15rpx; border-radius: 10rpx;display: flex;align-items: center;justify-content: center;background: #ff7627;color: white;font-size: 20rpx;">
									加入语音通话
								</view>
							</view>
					</view>
					
					<view v-else
						style="width: 350rpx;min-height: 80rpx;display: flex;padding: 15rpx;border-radius: 8rpx;background: #fff;align-items: center;flex-direction: column;">
						<image src="/static/images/mnadc.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view style="font-size: 20rpx;margin-top: 10rpx;">
								{{info.name}}邀请你语音通话
							</view>
							
							<view style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 12rpx;justify-content: center;">
								
								<u-avatar v-for="(item,ki) in makeusers()" size="30"
									:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.id + '.jpg'"></u-avatar>
							</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else style="width: 100%;display: flex;padding: 15rpx;flex-direction: row-reverse;">

			<u-avatar mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.uid + '.jpg'"></u-avatar>
			<view style="width: 100%;display: flex;flex-direction: row-reverse;">
				<image src="/static/images/rightc.png"
					style="width: 25rpx;position: relative;right: 7rpx;top: 10px;" mode="widthFix"></image>
				<view v-if="infox.status && infox.status != '已完结'"
					style="width: 350rpx;min-height: 80rpx;display: flex;padding: 15rpx;border-radius: 8rpx;background: #cff1ff;align-items: center;flex-direction: column;">
					<image src="/static/images/mnadc.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
						<view style="font-size: 20rpx;margin-top: 10rpx;">
							{{info.name}}发起语音通话
						</view>
						
						<view style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 12rpx;justify-content: center;">
							
							<u-avatar v-for="(item,ki) in makeusers()" size="30"
								:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.id + '.jpg'"></u-avatar>
						</view>
						
						<view @click="goinroom" style="width: 100%;display: flex;margin-top: 22rpx;justify-content: center;margin-bottom:20rpx;">
							<view style="padding: 15rpx; border-radius: 10rpx;display: flex;align-items: center;justify-content: center;background: #ff7627;color: white;font-size: 20rpx;">
								加入语音通话
							</view>
						</view>
				</view>
				
				<view v-else
					style="width: 350rpx;min-height: 80rpx;display: flex;padding: 15rpx;border-radius: 8rpx;background: #cff1ff;align-items: center;flex-direction: column;">
					<image src="/static/images/mnadc.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
						<view style="font-size: 20rpx;margin-top: 10rpx;">
							{{info.name}}发起语音通话
						</view>
						
						<view style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 12rpx;justify-content: center;">
							
							<u-avatar v-for="(item,ki) in makeusers()" size="30"
								:src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.id + '.jpg'"></u-avatar>
						</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub,sub
	} from '@/common/event';
	import moment from 'moment';
	export default {
		data() {
			return {
				infox:''
			}
		},
		mounted() {
			sub(`socket_videocallchange_${this.info.id}`, (e) => {
				this.infox.status = e.status
			})
			this.infox = this.info
			
			setTimeout(()=>{
				this.getgvideocallinfo()
			},300)
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				list: (state) => {

				}
			})
		},
		methods: {
			getgvideocallinfo:async function(){
				// const ret = this.$u.get(`chat/chat/getgvideocallinfo/${this.info.id}`)
				// if(!ret || !ret.success || !ret.data){
				// 	this.infox.status = "已完结"
				// 	this.$u.put(`bgyx/bgyx/putdata/message`,{
				// 		id:this.info.id,
				// 		status:"已完结"
				// 	})
				// }else if(ret && ret.success && ret.data){
				// 	if(moment().valueOf() - ret.data.time > 24*60*60*1000){
				// 		this.$u.put(`bgyx/bgyx/putdata/message`,{
				// 			id:this.info.id,
				// 			status:"已完结"
				// 		})
				// 		this.infox.status = "已完结"
				// 	}
				// }
			},
			goinroom:function(){
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/friend/gaudiocall?id="+this.info.gid + "&mid="+this.info.id
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url:"/pages/friend/gaudiocallh5?id="+this.info.gid + "&mid="+this.info.id
				})
				// #endif
			},
			makeusers:function(){
				if(!this.info || !this.info.content){
					return []
				}
				
				try{
					const ret = JSON.parse(this.info.content)
					return ret
				}catch(e){
					//TODO handle the exception
					return []
				}
			},
			gourl:function(){
				const url = this.extractLink(this.info.content)
				if(url){
					// #ifdef APP
					plus.runtime.openWeb(url)
					// #endif
					// #ifdef H5
					window.open(url)
					// #endif
				}
			},
			extractLink:function(text) {
			  const urlRegex = /https?:\/\/(?:www\.)?[^\s/$.?#].[^\s]*/g;
			  const match = text.match(urlRegex);
			  return match ? match[0] : null;
			},
			handleLongpress: function(e) {
				console.log(e)
				if (moment().valueOf() - this.info.time > 60000) {
					this.actions = [{
							text: '转发',
						},
						{
							text: '复制',
						},
						{
							text: '收藏',
						},
					]
				}
			},
			gofriend: function() {
				const list = this.$store.state.friend.list
				const user = this.$store.state.user.user
				const ret = list.find(e => {
					return e.fid == this.info.uid
				})
				if (ret) {
					uni.navigateTo({
						url: "/pages/friend/detail?id=" + this.info.uid
					})
				} else {
					uni.navigateTo({
						url: "/pages/friend/friend?id=" + this.info.uid
					})
				}
			},
			csitemfunc: async function(ex) {
				const e = ex.text
				console.log(e)
				if (e == "转发") {
					uni.navigateTo({
						url: "/pages/friend/sharemessage?id=" + this.info.id
					})
				}
				if (e == "撤回") {
					const ret = await this.$u.delete(`chat/chat/removemessage/${this.info.id}`)
					uni.showToast({
						title: "已撤回",
					})
				}
				if (e == "收藏") {
					const ret = await this.$u.post(`chat/chat/collect`, this.info)
					pub("collect_done", ret.data)
					uni.showToast({
						title: "已收藏"
					})
				}
				if (e == "复制") {
					uni.setClipboardData({
						data: this.info.content,
						success: function() {
							uni.showToast({
								title: "已复制",
								icon: "success"
							})
						}
					});
				}
			},
		}
	}
</script>

<style>
</style>